import React, {
  Component,
  createRef,
  createContext,
  useRef,
  useState,
} from "react";
import PropType from 'prop-types'
import { BrowserRouter as Router, Routes, Route } from "react-router-dom";
import * as THREE from 'three';
import { OrbitControls } from "three/examples/jsm/controls/OrbitControls"
import gsap from 'gsap'; //动画库
import Stats from 'stats.js'; //性能监控
import { FBXLoader } from 'three/examples/jsm/loaders/FBXLoader.js'; // FBX 模型加载器


const ReactDemo=()=>{
  let camera:any, scene:any, renderer:any, stats:any;
  init();
  animate();

  function init() {

    const container = document.createElement( 'div' );
    document.body.appendChild( container );

    camera = new THREE.PerspectiveCamera( 45, window.innerWidth / window.innerHeight, 1, 12000 );
    camera.position.set( 2, 18, 28 );

    scene = new THREE.Scene();

    const hemiLight = new THREE.HemisphereLight( 0xffffff, 0x444444 );
    hemiLight.position.set( 0, 1, 0 );
    scene.add( hemiLight );

    const dirLight = new THREE.DirectionalLight( 0xffffff );
    dirLight.position.set( 0, 1, 0 );
    scene.add( dirLight );

    // grid
    const gridHelper = new THREE.GridHelper( 28, 28, 0x303030, 0x303030 );
    scene.add( gridHelper );

    // stats
    stats = new Stats();
    container.appendChild( stats.dom );

    // model
    const loader = new FBXLoader();
    loader.load( '3D/nurbs.FBX' , function ( object ) {

      scene.add( object );

    } );

    renderer = new THREE.WebGLRenderer();
    renderer.setPixelRatio( window.devicePixelRatio );
    renderer.setSize( window.innerWidth, window.innerHeight );
    container.appendChild( renderer.domElement );

    const controls = new OrbitControls( camera, renderer.domElement );
    controls.target.set( 0, 12, 0 );
    controls.update();

    window.addEventListener( 'resize', onWindowResize );

  }

  function onWindowResize() {

    camera.aspect = window.innerWidth / window.innerHeight;
    camera.updateProjectionMatrix();

    renderer.setSize( window.innerWidth, window.innerHeight );

  }

  //

  function animate() {

    requestAnimationFrame( animate );

    renderer.render( scene, camera );

    stats.update();

  }
  return (<>
   
    
    <div id="id">xx</div>
  </>)
}

export default ReactDemo;
